<template>
  <div  class="containter-main">
    <SkyCardPanel title="日期控件">
       <div slot="header-right">
              <sky-button type="primary" @click="openMoreFun('date')">查看更多参数</sky-button>
            </div>
       <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="默认" class="col_8">
                 <sky-date-picker v-model="form.value1" type="date" placeholder="选择日期"></sky-date-picker>
            </sky-form-item> 
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="选择日期范围" class="col_8">
                 <sky-date-picker v-model="form.value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></sky-date-picker>
            </sky-form-item> 
          </div>
        </sky-form>
       </div>   
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
          //默认
          &lt;sky-date-picker v-model="value1" type="date" placeholder="选择日期"&gt;
          &lt;/sky-date-picker&gt;

          //选择日期范围
          &lt;sky-date-picker v-model="value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"&gt;
          &lt;/sky-date-picker&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                  value1: '',
                  value2: ''
                };
              }
            };
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="日期
    时间控件">
      <div slot="header-right">
              <sky-button type="primary" @click="openMoreFun('time')">查看更多参数</sky-button>
            </div>
       <div slot="main" class="containter-form">
        <sky-form :model="form" ref="SkyInlineForm">
          <div class="SkyFormRow">
            <sky-form-item label="默认" class="col_8">
                 <sky-date-picker v-model="form.value3" type="datetime" placeholder="选择日期时间"></sky-date-picker>
            </sky-form-item> 
          </div>
          <div class="SkyFormRow">
            <sky-form-item label="设置默认时间" class="col_8">
                 <sky-date-picker v-model="form.value4" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></sky-date-picker>
            </sky-form-item> 
          </div>
           <div class="SkyFormRow">
            <sky-form-item label="设置默认时间" class="col_8">
                 <sky-date-picker v-model="form.value5" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></sky-date-picker>
            </sky-form-item> 
          </div>
        </sky-form>
       </div>   
    </SkyCardPanel>
      <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
          //默认    
                 &lt;sky-date-picker v-model="form.value3" type="datetime" placeholder="选择日期时间"&gt;&lt;/sky-date-picker&gt;
          //设置默认时间

                 &lt;sky-date-picker v-model="form.value4" type="datetime" placeholder="选择日期时间" default-time="12:00:00"&gt;&lt;/sky-date-picker&gt;
          
          //设置默认时间 
          
                 &lt;sky-date-picker v-model="form.value5" type="datetime" placeholder="选择日期时间" default-time="12:00:00"&gt;&lt;/sky-date-picker&gt;
                 
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {
                  value3: '',
                  value4: '',
                  value5：'',
                };
              }
            };
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        form:{
          value1:"",
          value2:"",
          value3:"",
          value4:"",
           value5:""
        }
      };
    },
    methods:{
      openMoreFun(type){
          switch(type){
            case 'date':
              window.open('https://element.eleme.io/#/zh-CN/component/date-picker')
            break;
            case 'time':
              window.open('https://element.eleme.io/#/zh-CN/component/datetime-picker')
            break;
            default:

            break;
          }
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>